<template>
  <div style="
      width: 100%;
      height: 250px;
      box-sizing: border-box;
      background-image: linear-gradient(to right, #fb7299, #00aeec);
      transition: background-image 1s;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    ">
    <van-image round fit="fill" width="100" height="100" :src="ava">
      <template v-slot:error>暂未上传</template></van-image>

  </div>
  <van-cell-group @click="show = true">
    <van-cell title="昵称" :value="userInfo.nickName" is-link />
    <van-cell title="手机号码" :value="userInfo.phone" is-link />
    <van-cell title="用户姓名" :value="userInfo.name" is-link />
    <van-cell title="年龄" :value="userInfo.age" is-link />
    <van-cell title="性别" :value="userInfo.sex == 1 ? '男' : '女'" is-link />
    <van-cell center title="病情描述" :value="userInfo.desc" label="" is-link />
    <!-- <van-cell title="病情描述" :value="userInfo.desc" is-link /> -->
    <van-cell title="版本号" :value="version" />
  </van-cell-group>
  <div class="tc">
    <van-cell style="margin-top: 10px" title="退出登录" @click="exit" />
  </div>
  <van-popup v-model:show="show" position="right" style="display:flex;align-items: center;"
    :style="{ height: '100%', width: '80%' }">

    <van-form @submit="submit">
      <van-cell-group inset>
        <van-field v-model="form.nickName" name="昵称" label="昵称" placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]" />
        <van-field v-model="form.phone" name="手机号码" label="手机号码" placeholder="手机号码"
          :rules="[{ required: true, message: '手机号码' }]" />
          <van-field v-model="form.name" name="用户姓名" label="用户姓名" placeholder="用户姓名"
          :rules="[{ required: true, message: '用户姓名' }]" />
        <van-field name="radio" label="性别">
          <template #input>
            <van-radio-group v-model="form.sex" direction="horizontal">
              <van-radio :name="1">男</van-radio>
              <van-radio :name="0">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field name="stepper" label="年龄">
          <template #input>
            <van-stepper v-model="form.age" />
          </template>
        </van-field>
        <van-field v-model="form.desc" rows="2" autosize label="病情描述" type="textarea" maxlength="50"
          placeholder="请输入病情描述" show-word-limit />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          修改
        </van-button>
      </div>
    </van-form>

  </van-popup>
  <div style="
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-top: 100px;
    "></div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showConfirmDialog, showToast } from "vant";
import storage from "@/utils/storage";
import { useRouter } from "vue-router";
import ava from "@/assets/images/avator.jpg"
import { modifyUserInfo, getUserDetail } from "@/api";

const router = useRouter();
const version = ref<any>(import.meta.env.VITE_VERSION);
const userInfo = ref<any>({});
const submit = async () => {
  let res = await modifyUserInfo(
    form.value
  )
  if (res.code == 200) {
    showToast('修改成功')
    show.value = false
  }


}
const form = ref<any>({})

const show = ref<boolean>(false)
const init = async () => {
  let res = await getUserDetail({
    id: storage.get('userInfo')._id
  });
  userInfo.value = res.data
  form.value = userInfo.value
};

init();
const exit = () => {
  showConfirmDialog({
    title: "温馨提示",
    message: "确定退出登录",
  })
    .then(async () => {
      router.replace("/login");
      storage.clear();
    })
    .catch(() => { });
};
</script>

<style lang="scss" scoped>
:deep(.van-cell__title:last-child) {
  display: flex !important;
  justify-content: center !important;
}
</style>
